<template>
	<view class="page">
		<view class="feed-title">{{i18n.title}}</view>
		<view class="feed-input">
			<input type="text" v-model="title" class="input" :placeholder="i18n.problem" />
		</view>
		<view class="feed-title">{{i18n.content}}</view>
		<view class="feed-input">
			<textarea v-model="content" class="textarea" :placeholder="i18n.suggest"></textarea>
		</view>
		<view class="feed-title">{{i18n.screenshot}}</view>
		<view class="feed-input feed-img">
			<view class="fesd-img" v-for="(src,index) in images" :key="index">
				<image :src="src" mode="scaleToFill" class="img"></image>
				<view class="close iconfont" @click="delImg(index)">&#xe603;</view>
			</view>
			<view class="fesd-img" @click="uploadImage" v-if="images.length < 3"><text class="iconfont">&#xe603;</text></view>
		</view>
		<button class="btn-block" hover-class="btn-hover" @click="submit">{{i18n.submit}}</button>
		<view class="wechat">
			<image class="wechat-img" :src="wechat.cs_wechat_qrcode" mode="aspectFit" @click="preview"></image>
			<view class="wechat-tit" v-if="wechat.cs_email"><text class="active">{{wechat.cs_email}}</text></view>
		</view>

	</view>
</template>

<script>
	import {
		domain
	} from '@/config.js';
	export default {
		data() {
			return {
				title: '',
				content: '',
				images: [], //反馈图片数组(上传)
				wechat: {} ,//微信
				appUrl:uni.getStorageSync('spare_domain')
			};
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: 'dope'
			});
		},
		onLoad() {
			this.config()
		},
		onShow(){
			uni.setNavigationBarTitle({
			 title: this.$t('service.customerService')
			})
		},
		computed:{
			i18n() {
				return this.$t('service');
			}
		},
		methods: {
			uploadImage() {
				let _this = this
				uni.chooseImage({
					count: 1,
					sizeType:['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册,相机选择
					success: function(res) {
						_this.images = _this.images.concat(res.tempFilePaths);
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			//删除图片
			delImg(index) {
				this.images.splice(index, 1)
			},
			//提交问题
			submit() {
				let _this = this
				if (!_this.title) {
					_this.$toast(this.$t('service.problem'));
					return
				}
				if (!_this.content) {
					_this.$toast(this.$t('service.suggest'));
					return
				}
				let data = {
					title: _this.title,
					content: _this.content
				};
				if (_this.images.length > 0) {
					//#ifdef H5
					    _this.$toast('H5无法上传图片，请前往APP上传！');
						return;
					//#endif
					let imgs = _this.images.map((value, index) => {
						return {
							name: 'images[' + index + ']',
							uri: value
						}
					});
					uni.showLoading({
						title: this.$t('service.submitting')
					});
					data['token'] = uni.getStorageSync('token');
					uni.uploadFile({
						url: this.appUrl + 'api/feedback/create',
						files: imgs,
						formData: data,
						success: (uploadFileRes) => {
							var data = JSON.parse(uploadFileRes.data)
							uni.hideLoading();
							if (data.code == 200) {
								_this.title = ''
								_this.content = ''
								_this.images = []
								uni.showToast({
									title: data.msg,
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: data.msg,
									icon: 'none'
								})
							}
						}
					});
				} else {
					_this.$post('api/feedback/create', data).then(res => {
						if (res.code == 200) {
							_this.title = ''
							_this.content = ''
						}
						_this.$toast(res.msg);
					});
				}

			},
			//config
			config() {
				this.wechat = uni.getStorageSync("config")
				this.$post('api/config').then(res => {
					if (res.code == 200) {
						this.wechat = res.data
						uni.setStorageSync("config", res.data)
					} else {
						this.$toast(res.msg);
					}
				});
			},
			//预览
			preview(){
				let _this = this
				uni.previewImage({
					current:'0',
					urls: [_this.wechat.cs_wechat_qrcode]
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.page {
		padding: 30upx;
	}

	.feed-title {
		font-size: 30upx;
	}

	.feed-input {
		background: #F0F5FF;
		border-radius: 10upx;
		padding: 20upx 30upx;
		margin: 20upx 0;

		.input {
			font-size: 28upx;
		}

		.textarea {
			width: 100%;
			font-size: 28upx;
			// line-height: 1.6;
			height: 200upx;
		}
	}

	.btn-block {
		margin-top: 60upx;
	}

	.wechat {
		text-align: center;
		padding: 50upx 0;

		.wechat-img {
			width: 260upx;
			height: 260upx;
		}

		.wechat-tit {
			margin-top: 20upx;
			font-size: 28upx;
			color:var(--txt-color);

			.active {
				margin-left: 10upx;
				color: var(--theme-color);
			}
		}
	}

	.feed-img {
		display: flex;
		justify-content: flex-start;
		padding: 20upx;
	}

	.fesd-img {
		width: 160upx;
		height: 160upx;
		border-radius: 10upx;
		border: 1px solid #666;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10upx;
		position: relative;

		.iconfont {
			color: #666;
			font-size: 50upx;
		}

		.img {
			padding: 1px 0;
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
		}

		.close {
			width: 40upx;
			height: 40upx;
			background: rgba(0, 0, 0, .5);
			border-radius: 50%;
			position: absolute;
			right: -20upx;
			top: -20upx;
			color: #ffffff;
			font-size: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: rotate(45deg);
		}
	}
</style>
